@import "~bootstrap/scss/bootstrap";
@import "./variables.scss";
.frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    background-color: $dark-indigo;
    border-bottom: 1px solid $indigo-800;
    color: $indigo-100;
  }
  .two-column {
    flex: 1;
    display: flex;
    background-color: $bgc;
    aside {
      display: flex;
      flex-direction: column;
      width: 240px;
      padding: 12px;
      background-color: $dark-indigo;
      color: $indigo-100;
      .menu-item {
        margin-bottom: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        &:hover {
          background-color: $indigo-900;
        }
        &.active {
          background-color: $indigo-700;
        }
        img {
          stroke: $indigo-100;
          margin-right: 10px;
        }
      }
    }
    main {
      flex: 1;
      display: flex;
      padding: 12px;
      flex-direction: column;
    }
  }
}
